<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body style="margin:0;">
    <div id="globus" style="width:100%;height:100%"></div>
    <script type="module">
        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { Geoid } from '../../src/og/terrain/Geoid.js';

        let osm = new XYZ("OpenStreetMap", {
            isBaseLayer: true,
            url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            visibility: true,
            attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        document.getElementById("globus").innerHTML = "Loading geoid...";

        Geoid.loadModel("//openglobus.org/geoid/egm96-15.pgm")
            .then((m) => {

                document.getElementById("globus").innerHTML = "";

                let geoid = new Geoid({
                    model: m
                });

                new Globe({
                    target: "globus",
                    name: "geoid",
                    terrain: new GlobusTerrain("openglobus", {
                        geoid: geoid
                    }),
                    layers: [osm]
                });
            });

    </script>
</body>

</html>